<template>
    <div class="box">
        <p >{{name}}</p>
        <button  @click="follow(3,userid)">{{$options.filters.ifFollow(userid) ? '已关注' : '关注'}}</button>
        <button class="btn btn-primary btn-sm position-absolute rt-0" @click="send()">发私信</button>
        <!-- 弹出框 -->
        <div class="modal fade" :id="id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">发私信</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">发给：</label>
                                <input v-model="toName" type="text" class="form-control" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="message-text" class="col-form-label">内容：</label>
                                <textarea v-model="toContent" class="form-control" id="message-text" rows="10"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" @click="send()" class="btn btn-primary" id="sendBtn">发送</button>
                    </div>
                </div>
            </div>
        </div>	
    </div>
</template>
<script>
import func from '@/components/Dialog/dialogJS.js';
import {mapState,mapMutations} from 'vuex'
export default {
    name:'Dialog',
    data(){
        return{
            toName:'',   //用户名
            toContent:'',   //内容
        }
    },
    props:[
        'name',
        'userid',
        'followStatus',
        'id'
    ],
  computed:{
  

  },
    methods:{
      ...mapMutations([
        'getfollowee'
      ]),
      follow(entityType,entityId){
        let _this = this;
        this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/follow', {
          entityType:entityType,
          entityId:entityId,
        }).then((response)=>{
          if (response.data.success) {
            console.log("关注完成：", response);
            let followStatus = response.data.content;
            _this.getfollowee()
            // item.hasFollowed = followStatus;
          }else{
            Toast.error("关注失败！");
          }
        })
      },
      /**
       * 发送私信
       */
      send(){

        const loginMember = Tool.getLoginMember()['id'];
        console.log(this.userid)
        console.log(loginMember)
        let str = '';
        if(this.userid > loginMember){
          str = loginMember + '_'  + this.userid
        }else  {
          str = this.userid + '_'  + loginMember
        }
        this.$router.push({
            path:'/letterdetail/' + str
        })
        console.log(str)
      }
    },
    mounted(){
           func();
        //    console.log('aaaa')
    },

    
}
</script>

<style lang="scss" scoped>
    @import './dialogcss.scss';
    .box{
        height: 120px;
        width: 200px;
        background: white;
        position: relative;
        z-index: 999;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid rgb(196, 194, 197);
        &>p{
            font-size: 20px;
        }
        button{
            padding: 10px 20px;
            border: none;
            margin-left: 5px;
            border-radius: 5px;
            outline: none;
            margin-bottom: 10px;
        }
    }
</style>